<template>
  <div class="detail">
    <van-nav-bar
      left-arrow
      :title="detail.community"
      @click-left="$router.back()"
    />
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="(item, index) in detail.houseImg"
        :key="index"
      >
        <img
          :src="baseurl + item"
          alt
          :style="{'width':'100%','height': '100%'}"
        />
      </van-swipe-item>
    </van-swipe>
    <div class="msg">
      <h3>{{detail.title}}</h3>
      <van-tag
        type="primary"
        plain
        v-for="(ite, index) in detail.tags"
        :key="index"
      >{{ite}}</van-tag>
      <div class="info">
        <div class="price">
          <div class="text">
            {{detail.price}}
            <span>/月</span>
          </div>
          <p>租金</p>
        </div>
        <div class="type">
          <div class="text">{{detail.roomType}}</div>
          <p>房型</p>
        </div>
        <div class="size">
          <div class="text">{{detail.size}}平米</div>
          <p>面积</p>
        </div>
      </div>
      <div class="other">
        <div>
          装修：
          <span>精装</span>
        </div>
        <div>
          朝向：
          <span
            v-for="item in detail.oriented"
            :key="item"
          >{{item}}</span>
        </div>
        <div>
          楼层：
          <span>{{detail.floor}}</span>
        </div>
        <div>
          类型：
          <span>普通住宅</span>
        </div>
      </div>
    </div>
    <div class="community">
      <div class="location">
        小区：
        <span>{{detail.community}}</span>
      </div>
      <div class="map">
        <baidu-map
          :center="{ lng: this.detail.coord?.longitude, lat: this.detail.coord?.latitude }"
          :zoom="16"
          style="height: 145px; width: 100%"
          :scroll-wheel-zoom="true"
        >
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-label
            v-if="Object.values(detail).length"
            :content="detail.community"
            :position="{ lng: this.detail.coord.longitude, lat: this.detail.coord.latitude }"
            class="labelmask"
          />
        </baidu-map>
      </div>
      <div class="mating">
        <h3>房屋配套</h3>
        <van-grid :border="false">
          <van-grid-item text="洗衣机">
            <template #icon>
              <i class="iconfont icon-xiyiji"></i>
            </template>
          </van-grid-item>
          <van-grid-item text="电视">
            <template #icon>
              <i class="iconfont icon-dianshiji"></i>
            </template>
          </van-grid-item>
          <van-grid-item text="空调">
            <template #icon>
              <i class="iconfont icon-kongdiao"></i>
            </template>
          </van-grid-item>
          <van-grid-item text="热水器">
            <template #icon>
              <i class="iconfont icon-haofangtuo400iconfont2reshuiqi"></i>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="desc">
      <h3>房源概况</h3>
      <div class="user">
        <div class="pic">
          <img
            src="http://liufusong.top:8080/img/avatar.png"
            alt
          />
        </div>
        <div class="username">
          <p>王女士</p>
          <p>
            <i class="iconfont icon-dunpaibaoxianrenzheng_o"></i>已认证房主
          </p>
        </div>
        <button size="small">发消息</button>
      </div>
      <div class="houseinfo">{{detail.description}}</div>
    </div>
    <div class="fixed">
      <van-button
        type="default"
        icon="star-o"
        @click="collect(detail.houseCode)"
      >收藏</van-button>
      <van-button type="default">在线咨询</van-button>
      <van-button type="primary" @click="call">电话预约</van-button>
    </div>
    <van-popup v-model="show">
      <h3>温馨提示</h3>
      <p>您还未登录，是否跳转登陆界面</p>
      <div class="button">
        <van-button @click="show = false">取消</van-button>
        <van-button @click="$router.push('/login')">跳转</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getToken } from '../../utils/localstorage'
import { collectHouse } from '../../apis/house'
export default {
  name: 'house-detail',
  components: {},
  props: {},
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState('community', ['detail']),
    ...mapState(['baseurl'])
  },
  watch: {},
  created () {
    this.$store.dispatch('community/getDetails', this.$route.params.id)
  },
  methods: {
    collect (id) {
      if (getToken()) {
        collectHouse(id)
      } else {
        this.show = true
      }
    },
    call () {
      location.href = 'tel:400-618-4000'
    }
  },
  activated () {
  }
}
</script>

<style scoped lang='less'>
.detail {
  padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
  height: 251px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.msg {
  padding: 15px;
  background-color: #fff;
  h3 {
    font-size: 16px;
    color: #333;
    margin: 16px 0;
  }
  .van-tag {
    margin-top: 5px;
    background-color: #e1f5f8;
    color: #3ebfce;
    padding: 2px 4px;
    margin-right: 5px;
  }
  .info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    .text {
      font-size: 18px;
      font-weight: bold;
      color: #fa5741;
      height: 26px;
      line-height: 26px;
      span {
        font-size: 12px;
      }
    }
    p {
      font-size: 14px;
      color: #999;
    }
  }
  .other {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    div {
      width: 50%;
      padding-top: 8px;
      color: #999;
      span {
        color: #333;
      }
    }
  }
}
.community {
  margin-top: 10px;
  background-color: #fff;
  .location {
    margin: 0 3%;
    height: 44px;
    line-height: 44px;
  }
  .map {
    height: 145px;
    /deep/ label.BMapLabel {
      font-size: 12px !important;
      padding: 5px 10px !important;
      color: #fff;
      background-color: #ee5d58 !important;
      transform: translate(-18px, -34px);
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border: 5px solid transparent;
        border-bottom: 5px solid #ee5d58;
        transform: rotate(-45deg);
      }
    }
  }
  .mating {
    padding: 0 10px;
    margin-bottom: 10px;
    h3 {
      padding: 15px 0;
      font-size: 15px;
      margin-bottom: 10px;
      border-bottom: 1px solid #cecece;
    }
    .van-grid {
      .van-grid-item {
        /deep/ .van-grid-item__content {
          .iconfont {
            font-size: 23px;
          }
          .van-grid-item__text {
            font-size: 16px;
          }
        }
      }
    }
  }
}
.desc {
  background-color: #fff;
  padding: 0 10px;
  margin: 10px 0;
  h3 {
    padding: 15px 0;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #cecece;
  }
  .user {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    .pic {
      width: 52px;
      height: 52px;
      margin: 10px 10px 0 0;
      img {
        width: 100%;
      }
    }
    .username {
      padding: 15px 0 0 5px;
      font-size: 14px;
      p:last-child {
        font-size: 12px;
        color: #fa5741;
        .iconfont {
          font-size: 16px;
        }
      }
    }
    button {
      position: absolute;
      right: 15px;
      top: 20px;
      padding: 3px 15px;
      color: #33be85;
      border: 1px solid #33be85;
      border-radius: 3px;
      background-color: #fff;
    }
  }
  .houseinfo {
    padding: 10px 0;
    font-size: 14px;
    color: #333;
  }
}
.fixed {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  .van-button {
    width: 33.3333%;
    height: 50px;
    border-left: 0;
    border-radius: 0;
    border-bottom: 0;
    font-size: 17px;
    color: #999;
    &:last-child {
      color: #fff;
    }
  }
}
.van-popup {
  text-align: center;
  padding-top: 20px;
  width: 270px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  h3 {
    font-size: 18px;
    color: #333;
    font-weight: normal;
  }
  p {
    margin: 10px 0;
    font-size: 16px;
    color: #999;
  }
  .button {
    position: absolute;
    bottom: 0;
    width: 100%;
    .van-button {
      border-bottom: 0;
      border-left: 0;
      font-size: 16px;
      width: 50%;
      &:last-child {
        color: #39a1ed;
      }
    }
  }
}
</style>
